/**
* sb8
*/

<template>
    <div class="function-use-content">
        <div class="device-content">
            <div class="title">
                <span class="span-1">页面统计</span>
                <slot name="content"></slot>
                <div class="table-box">
                    <el-table
                            :data="arrayList"
                            stripe
                            height="350"
                            style="width: 100%">
                        <el-table-column
                                prop="page_name"
                                label="页面">
                        </el-table-column>
                        <el-table-column
                                prop="page_PV"
                                sortable
                                label="PV">
                        </el-table-column>
                        <el-table-column
                                prop="page_UV"
                                sortable
                                label="UV">
                        </el-table-column>
                        <el-table-column
                                prop="page_UV_new"
                                sortable
                                label="新增UV">
                        </el-table-column>
                        <el-table-column
                                prop="average_use_duration_by_page"
                                sortable
                                label="页面访问平均时长">
                        </el-table-column>
                    </el-table>
                </div>
                <div style="margin-top: 15px">平均访问时间最长页面：{{longTimePage.page_name || 0}}</div>
            </div>
        </div>

    </div>
</template>

<script>
export default {
  created () {
  },
  props: {
    pluginPageStatistics: {
      type: Object
    }
  },
  watch: {
    pluginPageStatistics (now, old) {
      if (now) {
        this.$nextTick().then(() => {
          this.initPage(now)
        })
      }
    }
  },
  data () {
    return {
      arrayList: [],
      model_type: '',
      longTimePage: {}
    }
  },
  methods: {
    initPage (data) {
      let pagePVUV = data.pagePVUV
      let useDuratioPpage = data.use_duration_page
      this.longTimePage = useDuratioPpage[0]
      this._.each(pagePVUV, (item) => {
        let _item = this._.find(useDuratioPpage, { page_name: item.page_name })
        if (_item) {
          item = Object.assign(item, _item)
        } else {
          item.average_use_duration_by_page = 0
        }
        item.page_UV_new = 0
      })
      this.arrayList = pagePVUV
    }
  }
}
</script>

<style lang="scss" scoped>
    @import "@/assets/scss/modules/variables-module.scss";
    @import "@/assets/scss/modules/common-module.scss";
    .function-use-content{
        .device-content{
            @include device-content;
        }
        .chart-wrap {
            width: 100%;
            height: 100%;
        }
        .use-bottom{
            display: flex;

        }
        .table-box{
            margin-top: 20px;
        }
    }
</style>
